"use client"

import type React from "react"

import { useRef, useState, useEffect } from "react"
import Image from "next/image"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Sparkles } from "lucide-react"

export default function RoadMapPage() {

  const q1Ref = useRef<HTMLDivElement>(null)
  const q2Ref = useRef<HTMLDivElement>(null)
  const q3Ref = useRef<HTMLDivElement>(null)
  const q4Ref = useRef<HTMLDivElement>(null)

  
  const [activeQuarter, setActiveQuarter] = useState<string>("q1")

 
  const scrollToSection = (ref: React.RefObject<HTMLDivElement | null>, quarterId: string) => {
    if (ref.current) {
      ref.current.scrollIntoView({ behavior: "smooth", block: "start" })
      setActiveQuarter(quarterId)
    }
  }

  
  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY + 150

      
      const q1Position = q1Ref.current?.offsetTop || 0
      const q2Position = q2Ref.current?.offsetTop || 0
      const q3Position = q3Ref.current?.offsetTop || 0
      const q4Position = q4Ref.current?.offsetTop || 0

      
      if (scrollPosition >= q4Position) {
        setActiveQuarter("q4")
      } else if (scrollPosition >= q3Position) {
        setActiveQuarter("q3")
      } else if (scrollPosition >= q2Position) {
        setActiveQuarter("q2")
      } else if (scrollPosition >= q1Position) {
        setActiveQuarter("q1")
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  return (
    <main className="min-h-screen bg-dark-blue relative">
      
      <div className="fixed inset-0 z-0">
        
        <div className="absolute inset-0 bg-dark-blue opacity-80 z-10"></div>
        
        <Image src="/images/background.jpeg" alt="Background" fill className="object-cover opacity-40 z-0" priority />
      </div>

      <div className="relative z-10">
        <Navbar />

        
        <div className="fixed right-4 md:right-8 top-1/2 transform -translate-y-1/2 z-50 flex flex-col gap-8">
          {[
            { id: "q1", label: "Q1", ref: q1Ref },
            { id: "q2", label: "Q2", ref: q2Ref },
            { id: "q3", label: "Q3", ref: q3Ref },
            { id: "q4", label: "Q4", ref: q4Ref },
          ].map((item, index) => (
            <div key={item.id} className="relative">
              {index < 3 && (
                <div className="absolute left-1/2 top-full w-0.5 h-10 bg-dark-blue-lighter/50 transform -translate-x-1/2"></div>
              )}
              <button
                onClick={() => scrollToSection(item.ref, item.id)}
                className={`w-12 h-12 rounded-full flex items-center justify-center transition-all duration-300 shadow-lg relative z-10 ${
                  activeQuarter === item.id
                    ? "bg-bera-blue text-white scale-110"
                    : "bg-dark-blue-lighter/50 text-gray-300 hover:bg-dark-blue-lighter hover:text-white"
                }`}
                aria-label={`Navigate to ${item.label} 2025`}
              >
                <span className="text-lg font-bold">{item.label}</span>
              </button>
            </div>
          ))}
        </div>

        
        <section className="relative pt-32 pb-16">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-7xl">
              
              <div className="text-center mb-16">
                <div className="flex items-center justify-center mb-4">
                  
                  <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-bera-yellow bg-clip-text text-transparent sm:text-5xl md:text-6xl mb-6">Beraroot Road Map</h1>
                </div>
                <p className="text-lg text-gray-300 max-w-3xl mx-auto">
                  Our strategic development plan outlines key milestones and future goals
                </p>
                
                <div className="relative w-full max-w-4xl mx-auto mt-8 h-32">
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="w-full h-1 bg-gradient-to-r from-transparent via-bera-blue to-transparent animate-pulse"></div>
                  </div>
                  <div className="absolute inset-0 flex items-center justify-between px-4">
                    {[...Array(5)].map((_, i) => (
                      <div key={i} className="relative">
                        <div className="w-4 h-4 rounded-full bg-bera-blue animate-ping"></div>
                        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-bera-blue"></div>
                      </div>
                    ))}
                  </div>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="w-8 h-8 rounded-full border-2 border-bera-blue animate-spin">
                      <div className="w-1 h-4 bg-bera-blue absolute top-0 left-1/2 transform -translate-x-1/2"></div>
                    </div>
                  </div>
                </div>
              </div>

              
              <div
                ref={q1Ref}
                className="mb-20 bg-dark-blue-lighter/20 backdrop-blur-sm rounded-xl p-8 border border-bera-blue/10 shadow-lg scroll-mt-32"
              >
                <h2 className="text-2xl font-bold text-bera-yellow mb-4">Q1 2025 — Foundation & Community Alignment</h2>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">January</h3>
                    <p className="text-gray-300">
                      Strategic restructuring of the core development team to accelerate delivery and attract top-tier
                      protocol engineers.
                    </p>
                  </div>

                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">February</h3>
                    <p className="text-gray-300">
                      Launch of the $BERA token airdrop to early community contributors, establishing the foundation for
                      long-term community alignment and decentralized governance.
                    </p>
                  </div>

                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">March</h3>
                    <p className="text-gray-300">
                      Advancement of Beraroot's DA protocol architecture.
                      <br />
                      <br />
                      Launch of community engagement campaigns including AMAs, whitelist airdrops for high-quality
                      partner projects, and community giveaway events.
                    </p>
                  </div>
                </div>
              </div>

              
              <div
                ref={q2Ref}
                className="mb-20 bg-dark-blue-lighter/20 backdrop-blur-sm rounded-xl p-8 border border-bera-blue/10 shadow-lg scroll-mt-32"
              >
                <h2 className="text-2xl font-bold text-bera-yellow mb-4">
                  Q2 2025 — Protocol Alpha to Beta Milestones
                </h2>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">April</h3>
                    <div className="text-gray-300">
                      Completion of <strong>Beraroot DA Service v0.1.0 Alpha</strong>
                      <ul className="list-disc pl-5 mt-2 space-y-1">
                        <li>Internal release with a modular, scalable architecture</li>
                        <li>
                          Core components implemented: consensus engine, base node framework, and data storage layer
                        </li>
                        <li>Initial benchmarking and internal stress testing begins</li>
                      </ul>
                    </div>
                  </div>

                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">May</h3>
                    <p className="text-gray-300">
                      Iterative refinement based on internal feedback
                      <br />
                      <br />
                      Integration of observability tools and performance monitoring dashboard
                    </p>
                  </div>

                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">June</h3>
                    <div className="text-gray-300">
                      Launch of <strong>Beraroot DA Service v0.5.0 Beta</strong>
                      <ul className="list-disc pl-5 mt-2 space-y-1">
                        <li>Public beta testing for community and ecosystem partners</li>
                        <li>
                          Completion of core features: DAS (Data Availability Sampling), and foundational RPC interfaces
                        </li>
                        <li>Collaboration initiated with modular L2s, rollups, and infrastructure projects</li>
                      </ul>
                    </div>
                  </div>
                </div>

                <div className="mt-8 bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                  <h3 className="text-xl font-semibold text-white mb-3">By July 1</h3>
                  <div className="text-gray-300">
                    Launch of the <strong>$BERAROOT</strong> token
                    <ul className="list-disc pl-5 mt-2 space-y-1">
                      <li>Token model supports long-term protocol incentives and modular security</li>
                      <li>Distributed to community and contributors</li>
                    </ul>
                  </div>
                </div>
              </div>

              
              <div
                ref={q3Ref}
                className="mb-20 bg-dark-blue-lighter/20 backdrop-blur-sm rounded-xl p-8 border border-bera-blue/10 shadow-lg scroll-mt-32"
              >
                <h2 className="text-2xl font-bold text-bera-yellow mb-4">
                  Q3 2025 — Mainnet Launch & Ecosystem Growth
                </h2>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">July</h3>
                    <div className="text-gray-300">
                      Release of <strong>Beraroot DA Service v1.0.0 Stable</strong>
                      <ul className="list-disc pl-5 mt-2 space-y-1">
                        <li>Mainnet launch with all core protocol modules finalized</li>
                        <li>Robust, fault-tolerant, high-performance DA infrastructure goes live</li>
                      </ul>
                    </div>
                  </div>

                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">August</h3>
                    <p className="text-gray-300">
                      Expansion of integrations with modular blockchain ecosystems, ZK rollups, and Berachain-native
                      tooling
                      <br />
                      <br />
                      Launch of Beraroot Integration SDK for developers
                    </p>
                  </div>

                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">September</h3>
                    <div className="text-gray-300">
                      Design and governance proposal for profit-sharing airdrops to $BERAROOT holders
                      <br />
                      <br />
                      Implementation of DAO governance enhancements to support proposal transparency and automated
                      treasury flow
                      <br />
                      <br />
                      In alignment with Berachain's RFA requirements:
                      <ul className="list-disc pl-5 mt-2 space-y-1">
                        <li>Distribution of RFA rewards to mainnet users</li>
                        <li>Allocation of funds to $BERAROOT token to incentivize liquidity</li>
                      </ul>
                    </div>
                  </div>
                </div>

                <div className="mt-8 bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                  <h3 className="text-xl font-semibold text-white mb-3">Q3 Marketing Expansion</h3>
                  <p className="text-gray-300">
                    Launch of multilingual community channels (English, Chinese, Korean) with regional ambassador
                    support
                    <br />
                    <br />
                    Emphasis on developer brand identity: performance-driven, transparent, and modular
                  </p>
                </div>
              </div>

              
              <div
                ref={q4Ref}
                className="mb-20 bg-dark-blue-lighter/20 backdrop-blur-sm rounded-xl p-8 border border-bera-blue/10 shadow-lg scroll-mt-32"
              >
                <h2 className="text-2xl font-bold text-bera-yellow mb-4">
                  Q4 2025 — Protocol Enhancement & Market Expansion
                </h2>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">October</h3>
                    <div className="text-gray-300">
                      Release of <strong>Beraroot DA Service v1.1.0 Enhanced Edition</strong>
                      <ul className="list-disc pl-5 mt-2 space-y-1">
                        <li>Integration of STARK-based quantum-resistant proofs for long-term security</li>
                        <li>DID-based identity module to support verifiable data provenance and access control</li>
                      </ul>
                    </div>
                  </div>

                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">November</h3>
                    <div className="text-gray-300">
                      Launch of the Beraroot Developer Hub and Knowledge Base
                      <ul className="list-disc pl-5 mt-2 space-y-1">
                        <li>
                          Education series, developer bounties, and public testing environments for third-party
                          integration
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div className="bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                    <h3 className="text-xl font-semibold text-white mb-3">December</h3>
                    <p className="text-gray-300">
                      Strategic go-to-market expansion with global partners in ZK, enterprise chains, and DA
                      infrastructure
                      <br />
                      <br />
                      Establishment of Beraroot as the go-to DA infrastructure for the{" "}
                      <strong>Berachain ecosystem</strong>
                    </p>
                  </div>
                </div>

                <div className="mt-8 bg-dark-blue-lighter/30 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20">
                  <h3 className="text-xl font-semibold text-white mb-3">Q4 Marketing Expansion</h3>
                  <p className="text-gray-300">
                    Participation in global Web3 and modular blockchain conferences
                    <br />
                    <br />
                    Sponsorship of hackathon events and expansion of community task campaigns
                  </p>
                </div>
              </div>

             
              <div className="rounded-xl overflow-hidden shadow-2xl">
                <img
                  src="/images/M.jpg"
                  alt="Beraroot Illustration"
                  className="w-full h-auto object-cover object-center brightness-75"
                />
              </div>
            </div>
          </div>
        </section>

        <Footer />
      </div>
    </main>
  )
}
